<template>
	<div class="CUserItem">
		<CHeadIcon :data="formatHeadIcon()">
		</CHeadIcon>
		<div class="u-i-panel">
			<p class="name" v-text="data.name"></p>

			<CAttributeTags :data="data.atags">
			</CAttributeTags>
		</div>
	</div>
</template>

<script>
	import CHeadIcon from '@/components/CHeadIcon.vue';
	import CAttributeTags from '@/components/CAttributeTags.vue';

	export default {
		name: 'CUserItem',
		data() {
			return {}
		},
		components: {
			CHeadIcon,
			CAttributeTags
		},
		methods: {
			formatHeadIcon() {
				var data = this.data;
				return {
					icon : data.icon,
					letter : data.letter,
					wh : 60,
					radius : true 
				}
			}
		},
		props: ['data']
	}
</script>

<style>
	.CUserItem {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		align-items: center;
		-webkit-align-items: center;
		-moz-align-items: center;
		margin-bottom: 20px;
	}
	
	.u-i-panel {
		margin-left: 15px;
	}
	
	.name {
		font-size: 15px;
		color: #000000;
		font-weight: 400;
		opacity: 0.87;
		margin-bottom: 6px;
	}
</style>